<template>
  <div class="notification-list" :class="{ 'apple-style': appleStyle }">
    <div v-if="appleStyle" class="apple-notification-list">
      <div 
        v-for="notification in notifications" 
        :key="notification.id"
        class="apple-notification-item"
        :class="{ 'is-read': notification.read }"
      >
        <div class="notification-dot" :class="notification.type"></div>
        <div class="notification-content">
          <div class="notification-header">
            <h3 class="notification-title">{{ notification.title }}</h3>
            <span class="notification-tag" :class="notification.type">
              {{ getTypeLabel(notification.type) }}
            </span>
          </div>
          <p class="notification-text">{{ notification.content }}</p>
          <div class="notification-footer">
            <span class="notification-time">{{ formatTime(notification.time) }}</span>
            <div class="notification-details">
              <span class="notification-location" v-if="notification.locationName">
                <i class="el-icon-location"></i> {{ notification.locationName }}
              </span>
              <span class="notification-item" v-if="notification.itemName">
                <i class="el-icon-goods"></i> {{ notification.itemName }}
              </span>
              <button 
                v-if="!notification.read"
                class="apple-button-text"
                @click.stop="markAsRead(notification.id)"
              >
                标为已读
              </button>
            </div>
          </div>
        </div>
      </div>

      <div v-if="notifications.length > 5" class="load-more">
        <button class="apple-button">加载更多</button>
      </div>
    </div>
    
    <!-- 保留原始组件实现，以便兼容性 -->
    <el-timeline v-else>
      <el-timeline-item
        v-for="notification in notifications"
        :key="notification.id"
        :type="getNotificationType(notification.type)"
        :color="getNotificationColor(notification.type)"
        :timestamp="notification.time"
        :hollow="notification.read"
      >
        <div class="notification-item" :class="{ 'is-read': notification.read }">
          <div class="notification-header">
            <h3 class="notification-title">{{ notification.title }}</h3>
            <div class="notification-actions">
              <el-tag size="small" :type="getTagType(notification.type)">
                {{ getTypeLabel(notification.type) }}
              </el-tag>
              <el-button 
                v-if="!notification.read"
                size="small" 
                text 
                @click="markAsRead(notification.id)"
              >
                标为已读
              </el-button>
            </div>
          </div>
          <p class="notification-content">{{ notification.content }}</p>
          <div class="notification-item-details" v-if="notification.locationName || notification.itemName">
            <span v-if="notification.locationName">位置: {{ notification.locationName }}</span>
            <span v-if="notification.itemName">物品: {{ notification.itemName }}</span>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  notifications: {
    type: Array,
    required: true
  },
  appleStyle: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['mark-read'])

const getNotificationType = (type) => {
  switch (type) {
    case 'expiry':
      return 'warning'
    case 'inventory':
      return 'info'
    case 'system':
      return 'primary'
    case 'updates':
      return 'success'
    default:
      return 'info'
  }
}

const getNotificationColor = (type) => {
  switch (type) {
    case 'expiry':
      return '#E6A23C'
    case 'inventory':
      return '#409EFF'
    case 'system':
      return '#67C23A'
    case 'updates':
      return '#5856D6'
    default:
      return '#909399'
  }
}

const getTagType = (type) => {
  switch (type) {
    case 'expiry':
      return 'warning'
    case 'inventory':
      return 'info'
    case 'system':
      return 'success'
    case 'updates':
      return 'primary'
    default:
      return ''
  }
}

const getTypeLabel = (type) => {
  switch (type) {
    case 'expiry':
      return '过期提醒'
    case 'inventory':
      return '库存提醒'
    case 'system':
      return '系统通知'
    case 'updates':
      return '更新通知'
    default:
      return '其他'
  }
}

const formatTime = (timeString) => {
  if (!timeString) return '';

  try {
    // 尝试将ISO格式转换为更友好的本地时间格式
    const date = new Date(timeString);
    if (isNaN(date.getTime())) {
      // 如果转换失败，说明可能不是ISO格式，直接返回原始字符串
      return timeString;
    }

    // 返回格式化的日期时间
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (e) {
    console.error('日期格式化错误:', e);
    return timeString; // 出错时返回原始字符串
  }
};

const markAsRead = (id) => {
  emit('mark-read', id)
}
</script>

<style scoped>
/* 原始样式 */
.notification-list {
  padding: 10px 0;
}

.notification-item {
  padding: 10px;
  border-radius: 6px;
  background-color: var(--el-fill-color-light);
  border-left: 3px solid var(--el-color-primary);
  transition: all 0.3s;
}

.notification-item.is-read {
  opacity: 0.7;
  border-left-color: var(--el-border-color);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.notification-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-content {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.notification-item-details {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

/* 苹果设计风格 */
.apple-notification-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apple-notification-item {
  display: flex;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--apple-card-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: float-up 0.5s ease forwards;
  opacity: 0;
  transform: translateY(10px);
  border: 1px solid var(--apple-border-light);
}

.dark-mode .apple-notification-item {
  background-color: var(--apple-card-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--apple-border-dark);
}

@keyframes float-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apple-notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.dark-mode .apple-notification-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.apple-notification-item.is-read {
  opacity: 0.7;
}

.notification-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 14px;
  margin-top: 5px;
  flex-shrink: 0;
}

.notification-dot.expiry {
  background-color: #FF9500;
}

.dark-mode .notification-dot.expiry {
  background-color: #FF9F0A;
}

.notification-dot.inventory {
  background-color: #007AFF;
}

.dark-mode .notification-dot.inventory {
  background-color: #0A84FF;
}

.notification-dot.system {
  background-color: #34C759;
}

.dark-mode .notification-dot.system {
  background-color: #30D158;
}

.notification-dot.updates {
  background-color: #5856D6;
}

.dark-mode .notification-dot.updates {
  background-color: #5E5CE6;
}

.notification-content {
  flex: 1;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.notification-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--apple-text-primary-light);
}

.dark-mode .notification-title {
  color: var(--apple-text-primary-dark);
}

.notification-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.notification-tag.expiry {
  background-color: rgba(255, 149, 0, 0.1);
  color: #FF9500;
}

.dark-mode .notification-tag.expiry {
  background-color: rgba(255, 159, 10, 0.2);
  color: #FF9F0A;
}

.notification-tag.inventory {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.dark-mode .notification-tag.inventory {
  background-color: rgba(10, 132, 255, 0.2);
  color: #0A84FF;
}

.notification-tag.system {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34C759;
}

.dark-mode .notification-tag.system {
  background-color: rgba(48, 209, 88, 0.2);
  color: #30D158;
}

.notification-tag.updates {
  background-color: rgba(88, 86, 214, 0.1);
  color: #5856D6;
}

.dark-mode .notification-tag.updates {
  background-color: rgba(94, 92, 230, 0.2);
  color: #5E5CE6;
}

.notification-text {
  margin: 0;
  font-size: 14px;
  color: var(--apple-text-primary-light);
  line-height: 1.5;
  margin-bottom: 12px;
}

.dark-mode .notification-text {
  color: var(--apple-text-primary-dark);
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 10px;
}

.notification-time {
  color: var(--apple-text-tertiary-light);
  font-weight: 500;
}

.dark-mode .notification-time {
  color: var(--apple-text-tertiary-dark);
}

.notification-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-location, .notification-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--apple-text-secondary-light);
  font-size: 12px;
}

.dark-mode .notification-location, .dark-mode .notification-item {
  color: var(--apple-text-secondary-dark);
}

.apple-button-text {
  background: none;
  border: none;
  color: var(--apple-blue);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  transition: opacity 0.2s;
}

.dark-mode .apple-button-text {
  color: var(--apple-blue-dark);
}

.apple-button-text:hover {
  opacity: 0.8;
}

/* 媒体查询适配移动设备 */
@media (max-width: 768px) {
  .notification-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .notification-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .notification-details {
    width: 100%;
    justify-content: space-between;
    margin-top: 5px;
  }
}
</style> 